<template>
	<view class="wp">
		<view class="container">
			<view class="top">
				<image src="/static/order/tui.png" mode="widthFix"></image>
				<view class="tit">{{refundInfo.goodstitle}}</view>
				<view class="price" v-if="refundInfo.status==1">+{{refundInfo.applyprice}}</view>
				<view class="status" v-if="refundInfo.status==0">售后中</view>
				<view class="status" v-if="refundInfo.status==1">退款成功</view>
				<view class="status" v-if="refundInfo.status==-2">退款驳回</view>
			</view>
			<view class="info">
				<view class="item">
					<view class="left">申请退款金额</view>
					<view class="right">{{refundInfo.applyprice}}</view>
				</view>
				<view class="item" v-if="(refundInfo.money&&refundInfo.money!=0)&&(refundInfo.micredit&&refundInfo.micredit!=0)">
					<view class="left">退款至</view>
					<view class="right">微信支付、多米街钱包</view>
				</view>
				<view class="item" v-else>
					<view class="left">退款至</view>
					<view class="right"><block  v-if="refundInfo.micredit&&refundInfo.micredit!=0">多米街钱包</block><block v-else>微信支付</block></view>
				</view>
				<view class="item">
					<view class="left">售后提交时间</view>
					<view class="right">{{refundInfo.applytime}}</view>
				</view>
				<view class="item">
					<view class="left">退款单号</view>
					<view class="right">{{refundInfo.refundno}}</view>
				</view>
			</view>
		</view>
		<view class="container refund">
			<view class="head">退款进度</view>
			<view class="progress">
				<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
				<!-- <uni-steps :options="list" active-color="#9532E4" :active="active" direction="column" /> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colors: '#9532E4',
				stepData: [
							{
							    name: '提交售后时间',
							    time: '',
							    isNow: 0,
							    type: 1,
							    desc: '提交售后时间'
							},
							{
								name: '多米街审核通过',
								time: '',
							    isNow: 0,
							    type: 1,
							    desc: '多米街已受理您的售后申请'
							},
							{
							    name: '退款处理完成，微信已入账',
							    time: '',
							    isNow: 0,
							    type: 1,
							    desc: '已退款至您指定的账号'
							}
				],       
				active:3,
				id: 0,
				refundInfo: []
			};
		},
		onLoad(option){
			this.id = option.id;
			this.getOrder();
			// this.list.reverse()
		},
		methods: {
			getOrder() {
				this.$axios('detail/refundOrder', "POST", 'order', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.refundInfo = res.data.data.refund;
						if(this.refundInfo.status==0){//申请中
							this.stepData[0].time = this.refundInfo.applytime;
							this.stepData[0].isNow = 1;
							this.stepData.splice(1,2)
							// this.stepData.splice(2,1)
						}else if(this.refundInfo.status==1){//已通过
							this.stepData[0].time = this.refundInfo.applytime;
							this.stepData[1].time = this.refundInfo.checktime;
							this.stepData[2].time = this.refundInfo.paytime;
							this.stepData[2].isNow = 1;
						}else if(this.refundInfo.status==-2){//已驳回
							this.stepData[0].time = this.refundInfo.applytime;
							this.stepData[1].time = this.refundInfo.checktime;
							this.stepData[1].name = '多米街审核拒绝';
							this.stepData[1].desc = '多米街已拒绝您的售后申请';
							this.stepData[1].isNow = 1;
							this.stepData.splice(2,1)
						}
						this.stepData.reverse()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
}
.wp{
	padding: 30rpx;
}
.container{
	background: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
	.top{
		text-align: center;
		line-height: 1.6;
		image{
			width: 76rpx;
			margin-top: 60rpx;
			margin-bottom: 26rpx;
		}
		.tit{
			font-size: 28rpx;
			color: #333333;
		}
		.price{
			color: #333333;
			font-weight: 600;
			font-size: 68rpx;
		}
		.status{
			font-size: 28rpx;
			color: #999999;
		}
	}
	.info{
		margin-top: 60rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			line-height: 3;
			.left{
				color: #999999;
			}
			.right{
				color: #333333;
			}
		}
	}
}
.refund{
	padding: 20rpx 0;
	.head{
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}
}
</style>
